<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet"href="https://cdn.staticfile.org/font-awesome/6.0.0/css/all.css">

		<link rel="stylesheet" href="{{ static('css/login.css') }}"/>

		<!-- 新 Bootstrap5 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

	</head>
	<body>
        <div class="head">

               <a href="{{ url('mainPage') }}" class="nav-link"><div class="h3">Haoyunlai driving school</div></a>

               <nav class="navbar navbar-expand-sm">

                  <!-- Links -->
                  <ul class="navbar-nav">
                      <li class="nav-item">
                      <a class="nav-link" href="{{ url('register') }}">User register</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="{{ url('login') }}">User/Coach login</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="{{ url('root') }}">Admin login</a>
                    </li>
                  </ul>

                </nav>
           </div>
        {% if error %}

            <div  class="alert alert-danger" style="padding: .5rem .5rem;">
                <i class="fa fa-close fa-lg message-close" style="margin-right: 5%"></i>{{ error }}
             </div>
        {% endif %}
		<div class="row form">
			<h3 class="form-title">Login to your account</h3>



					<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form" method="post" action="{{ url('login') }}">
                        
						<div class="col-sm-9 col-md-9" style="width: 90%;">


							{{ csrf_input }}
							<div class="form-group" id='login-user' >
								<i class="fa fa-user fa-lg"></i>
								{{ form.username}}
							</div>

							<div class="form-group">
									<i class="fa fa-lock fa-lg"></i>
									{{ form.password}}
							</div>
                            <div class="form-group" style="margin-left: 49%;width: 51%">
                                <img src="{{ url('verifycode') }}" style="margin-right: 1%;border: 1px solid rgba(0,0,0,0.4);height: 100%" alt='验证码'>
                                {{ form.verifycode }}
                            </div>

							<div class="form-group" style="display: flex;flex-direction: row-reverse;">
								<input type="submit" class="btn btn-success " value="Login "/>
							</div>
						</div>
					</form>
				</div>


	</body>

	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
	<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
	<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
	<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
	<script src="{{ static('js/login.js') }}"></script>
	<script>init()</script>
</html>
